import Taro, {Component} from '@tarojs/taro'
import {Image, Text, View,} from '@tarojs/components'
import './index.less'
import Banner from '../../components/banner/banner'
import ServerIcon from '../../components/serverIcon/serverIcon'
import {AtCountdown, AtTabs, AtTabsPane, AtTag, AtToast} from 'taro-ui'
import {jingxi, activity} from "../../common/index/options";
import ShoppingCard from '../../components/shoppingCard/shoppingCard'


export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      isOpened: false,
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  handleClick = (currentKey) => {
    this.setState({
      current: currentKey
    })

  }


  render() {


    const {current, isOpened} = this.state;

    const shoppingData = new Array(10).fill(0)

    const tabList = new Array(8).fill(0)


    return (
      <View className='index'>

        <Banner/>

        <View className='all-server-icon'>

          <ServerIcon/>

          <View className='at-row item-content-box'>
            <View className='at-col at-col-6 item-content item-content-left'>
              <Text className='item-content-jx-title pull-bg-left'>
                京喜购物
                <Text className='item-content-jx-small-title'>
                  省钱好物1元起
                </Text>
              </Text>

              <View className='at-row'>
                {
                  jingxi.map(value => {

                    return (
                      <View className='at-col at-col-6' key={value.key}>
                        <Image
                          className='item-content-img'
                          src={value.url}
                          alt=''
                          mode='aspectFill'
                          lazyLoad={true}
                        />
                        <Text className='item-content-shopping-info'>
                          <Text className='item-content-shopping-info-group'>
                            {value.group}人拼
                          </Text>
                          ￥{value.currentCount}
                        </Text>
                        <Text className='item-content-origin-money'>￥{value.originCount}</Text>
                      </View>
                    )
                  })
                }

              </View>
            </View>
            <View className='at-col at-col-6 item-content item-content-right'>

              <View className='at-row pull-bg-right'>
                <View className='at-col'>
                  <Text className='item-content-jx-title'>
                    京东秒杀
                  </Text>
                </View>
                <View className='at-col item-content-countdown'>
                  <AtCountdown
                    format={{hours: ':', minutes: ':', seconds: ''}}
                    hours={1}
                    minutes={1}
                    seconds={10}
                  />
                </View>
              </View>

              <View className='at-row'>
                {
                  jingxi.map(value => {

                    return (
                      <View className='at-col at-col-6' key={value.key}>
                        <Image
                          className='item-content-img'
                          src={value.url}
                          alt=''
                          mode='aspectFill'
                          lazyLoad={true}
                        />
                        <Text className='item-content-shopping-info'>
                          ￥{value.currentCount}
                        </Text>
                        <Text className='item-content-origin-money'>￥{value.originCount}</Text>
                      </View>
                    )
                  })
                }
              </View>

            </View>
          </View>


          <View className='at-row activity-box'>

            {
              activity.map(value => {
                return (
                  <View className='at-col at-col-3 activity-content' key={value.key}>
                    <Text className='activity-title'>
                      {value.title}
                    </Text>
                    <Text className='activity-small-title' style={{color: value.smallColor}}>
                      {value.smallTitle}
                    </Text>
                    <Image
                      className='activity-img'
                      src={value.url}
                      alt=''
                      mode='aspectFill'
                      lazyLoad={true}
                    />
                  </View>
                )

              })
            }
          </View>

          <View style={{height: '1rem'}}/>
          <AtTabs
            animated={true}
            current={current}
            scroll={true}
            tabList={[
              {title: '电器'},
              {title: '男装'},
              {title: '超市'},
              {title: '美妆'},
              {title: '鞋靴'},
              {title: '女装'},
              {title: '生活'},
              {title: '运动'},
            ]}
            onClick={this.handleClick}>

            <AtTabsPane current={current} index={0} key={'objiitem' + 0}>
              <View style={{minHeight: '10rem'}} className='tab-content-box at-row at-row--wrap'>
                {
                  shoppingData.map((value, index) => {
                    const _key = 'tab-' + index;
                    const _isHot = index % 3 === 1;
                    return (
                      <View className='at-col at-col-6 tab-content-item' key={_key}
                            onClick={() => this.setState({isOpened: true})}>
                        <ShoppingCard hot={_isHot}/>
                      </View>
                    )
                  })
                }
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={1} key={'objiitem' + 1}>
              <View style={{minHeight: '10rem'}} className='tab-content-box at-row at-row--wrap'>
                {
                  shoppingData.map((value, index) => {
                    const _key = 'tab-' + index;
                    const _isHot = index % 3 === 1;
                    return (
                      <View className='at-col at-col-6 tab-content-item' key={_key}
                            onClick={() => this.setState({isOpened: true})}>
                        <ShoppingCard hot={_isHot}/>
                      </View>
                    )
                  })
                }
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={2} key={'objiitem' + 2}>
              <View style={{minHeight: '10rem'}} className='tab-content-box at-row at-row--wrap'>
                {
                  shoppingData.map((value, index) => {
                    const _key = 'tab-' + index;
                    const _isHot = index % 3 === 1;
                    return (
                      <View className='at-col at-col-6 tab-content-item' key={_key}
                            onClick={() => this.setState({isOpened: true})}>
                        <ShoppingCard hot={_isHot}/>
                      </View>
                    )
                  })
                }
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={3} key={'objiitem' + 3}>
              <View style={{minHeight: '10rem'}}>
                <View className='tab-content-box at-row at-row--wrap'>
                  {
                    shoppingData.map((value, index) => {
                      const _key = 'tab-' + index;
                      const _isHot = index % 3 === 1;
                      return (
                        <View className='at-col at-col-6 tab-content-item' key={_key}
                              onClick={() => this.setState({isOpened: true})}>
                          <ShoppingCard hot={_isHot}/>
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={4} key={'objiitem' + 4}>
              <View style={{minHeight: '10rem'}}>
                <View className='tab-content-box at-row at-row--wrap'>
                  {
                    shoppingData.map((value, index) => {
                      const _key = 'tab-' + index;
                      const _isHot = index % 3 === 1;
                      return (
                        <View className='at-col at-col-6 tab-content-item' key={_key}
                              onClick={() => this.setState({isOpened: true})}>
                          <ShoppingCard hot={_isHot}/>
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={5} key={'objiitem' + 5}>
              <View style={{minHeight: '10rem'}}>
                <View className='tab-content-box at-row at-row--wrap'>
                  {
                    shoppingData.map((value, index) => {
                      const _key = 'tab-' + index;
                      const _isHot = index % 3 === 1;
                      return (
                        <View className='at-col at-col-6 tab-content-item' key={_key}
                              onClick={() => this.setState({isOpened: true})}>
                          <ShoppingCard hot={_isHot}/>
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={6} key={'objiitem' + 6}>
              <View style={{minHeight: '10rem'}}>
                <View className='tab-content-box at-row at-row--wrap'>
                  {
                    shoppingData.map((value, index) => {
                      const _key = 'tab-' + index;
                      const _isHot = index % 3 === 1;
                      return (
                        <View className='at-col at-col-6 tab-content-item' key={_key}
                              onClick={() => this.setState({isOpened: true})}>
                          <ShoppingCard hot={_isHot}/>
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={7} key={'objiitem' + 7}>
              <View style={{minHeight: '10rem'}}>
                <View className='tab-content-box at-row at-row--wrap'>
                  {
                    shoppingData.map((value, index) => {
                      const _key = 'tab-' + index;
                      const _isHot = index % 3 === 1;
                      return (
                        <View className='at-col at-col-6 tab-content-item' key={_key}
                              onClick={() => this.setState({isOpened: true})}>
                          <ShoppingCard hot={_isHot}/>
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            </AtTabsPane>


          </AtTabs>


        </View>
        <AtToast
          isOpened={isOpened}
          status='loading'
          text="正在努力建设中..."
          duration={500}
          onClose={() => this.setState({isOpened: false})}
        />

      </View>
    )
  }
}
